
<template>
    <el-dialog>
        <div class="group-selector">
            <el-select v-model="selectedGroup" placeholder="选择分组" style="width: 200px; margin-right: 10px;">
                <el-option label="全部文本" :value="-1" />
                <el-option
                    v-for="group in store.groups"
                    :key="group.groupId"
                    :label="group.name"
                    :value="group.groupId"
                />
            </el-select>
            <el-button @click="openTextView">打开文本编辑器</el-button>
        </div>
        
        <el-table :data="currentPageElements" highlight-current-row @current-change="handleCurrentChange">
            <el-table-column label="id" width="100" #default="scope">
                <el-text>{{ scope.row.id }}</el-text>
            </el-table-column>
            <el-table-column v-for="(item, index) in store.languages"
                :label="item.name"
                width="180" #default="scope">
                <el-text>{{ scope.row.texts[index] }}</el-text>
            </el-table-column>
        </el-table>
        
        <el-pagination 
            layout="prev, pager, next" 
            :total="filteredElements.length"
            v-model:current-page="currentPage"
            :page-size="pageSize">
        </el-pagination>
        
        <el-button @click="onClickConfirm">确定</el-button>
    </el-dialog>
</template>

<script setup lang='ts'>
import {useTextStore} from "@/stores/config/configTextStore"
import { ref, computed } from 'vue';

const store = useTextStore()
const selectedGroup = ref(-1)
const currentPage = ref(1)
const pageSize = ref(10)
const electron = require("electron")
let selectedId = 0

const filteredElements = computed(() => {
    if (selectedGroup.value === -1) return store.elements;
    const group = store.groups.find(g => g.groupId === selectedGroup.value);
    return group ? store.elements.filter(e => group.elementIds.includes(e.id)) : [];
});

const currentPageElements = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    return filteredElements.value.slice(start, start + pageSize.value);
});

const handleCurrentChange = (row: any) => {
    selectedId = row?.id || 0;
}

const emit = defineEmits(['confirm'])
const onClickConfirm = () => {
    emit('confirm', selectedId)
}
const openTextView = () => {
  electron.ipcRenderer.send('open-text-manager');
}
</script>

<style>
.group-selector {
  margin-bottom: 15px;
}
</style>